import indexController from '../controllers/'

import movieController from '../controllers/positions'
import cinemaController from '../controllers/cinema'
import profileController from '../controllers/profile'
import cityController from '../controllers/city'
import searchController from '../controllers/search'
import movieProjectionController from '../controllers/movieProjection'
import cinemasDetailsController from '../controllers/cinemasDetails'
import registerController from '../controllers/register'

class Router{
    constructor(){
        this.render()
    }

    render(){
        window.addEventListener('load',this.handlePageload.bind(this))
        window.addEventListener('hashchange',this.handlePageload.bind(this))
    }

    setActiveClass(hash){
        $(`footer li[data-to=${hash}]`).addClass('active').siblings().removeClass('active')
    }

    renderDOM(hash){
        
        let pageConterllors = {
            movieController,
            cinemaController,
            profileController,
            cityController,
            searchController,
            movieProjectionController,
            cinemasDetailsController,
            registerController

        }
        let type = hash.match(/\w+/g)[0]
        let ID = hash.match(/\w+/g)[1]

        pageConterllors[type + 'Controller'].render(ID)
    }

    handlePageload(){
        let hash = location.hash.substr(1) || 'movie'
        
        indexController.render()
        location.hash = hash

        this.renderDOM(hash)
        if(hash=='movie'||hash=='cinema'||hash=='profile'){
            this.setActiveClass(hash)
        }
    }

    handleHashchange(e){
        let hash = location.hash.substr(1)

        this.renderDOM(hash)
        this.setActiveClass(hash)
    }
}

new Router()